Pie and Doughnut Charts

Pie Charts

To display a pie chart, use the PieChart control. (The Chart control is not used for pie charts.)

To display data in the pie chart, add a data set to the PieSeries collection:

CopyCreating a pie chart

<ms:PieChart Title="Sales" Width="600" Height="400">
  <ms:PieSeries ItemsSource="{Binding}" />
</ms:PieChart>

The example above assumes that the data context is a collection of numeric values. To display a collection of business objects, use the DataBinding property to specify the value you want to show in the chart, and the TitleBinding to specify the title (legend text) associated with the data item:

CopyCreating a pie chart

<ms:PieChart Title="Sales by Region" Width="600" Height="400">
  <ms:PieSeries ItemsSource="{Binding}" 
                DataBinding="{Binding Amount}" 
                TitleBinding="{Binding RegionName}" 
                />
</ms:PieChart>

You can also alter the radius of each pie slice using RadiusBinding.

Multiple series in a pie chart are shown as nested charts. The first series is the outermost chart.

Partial Pies

It is sometimes useful to show a pie chart with a ‘missing’ slice. For example if you were using the pie chart to show contributions towards a target from different sources, but the contributions added up to less than the target, you could leave a missing slice to show the shortfall.

To make a partial pie, set the FullCircleTotal property of the PieSeries. The angle for each slice will then be calculated as a fraction of this value rather than as a fraction of the total slice values. If the total slice values fall short of the FullCircleTotal, then the pie will have a missing slice.

Doughnut Charts

To display a doughnut chart, use a PieChart and PieSeries as if you were creating a pie chart, but set PieSeries.DoughnutScale to a value less than 1. The lower the value, the larger the doughnut hole.

Customizing Pie Slice Colors

To control the fill for the pie slices, use the PieSeries.Brushes collection:

CopyAlternating colors for pie slices

<ms:PieSeries>
  <ms:PieSeries.Brushes>
    <SolidColorBrush Color="Orange" />
    <SolidColorBrush Color="Yellow" />
  </ms:PieSeries.Brushes>
</ms:PieSeries>

If there are more bars than brushes, then the brushes are used in rotation.

Styling the Pie Slices

To customize the appearance of the pie slices over and above changing the brush, use the PieSliceStyle property. The target type of the style should be PieSlice. You will typically set the control Template. The calculated geometry of the slice is available in the PathData property of the PieSlice.

CopyAdding a gaily colorful border to each slice

<ms:PieSeries>
  <ms:PieSeries.PieSliceStyle>
    <Style TargetType="ms:PieSlice">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate>
            <Path Fill="{TemplateBinding Background}" 
                  Data="{Binding PathData, RelativeSource={RelativeSource TemplatedParent}}" 
                  StrokeThickness="1" Stroke="Lime" 
                  StrokeLineJoin="Round" />
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ms:PieSeries.PieSliceStyle>
</ms:PieSeries>